<template>
	<view>
		<!-- 产品详情 -->
		<!-- 内容 -->
		<view class="lfy_goods_box">
			<view style="width: 100%;height: 600upx; margin: 0 auto;">
				<img style="width: 100%;height: 268px;" :src='goods.url' />
			</view>
			<view class="goods_info">
				<p class="name">{{goods.name}}</p>
				<p class="goods_tags">
					<span class="price">
						<span class="symbol">¥</span>
						{{goods.price}}
					</span>
					<span class="collect">1小时前发布</span>
				</p>
				<p class="goods_introduce">{{goods.introduce}}</p>
			</view>
		</view>
		<!-- 发布人 -->
		<view class="lfy_goods_box seller_info">
			<p class="title">发布人</p>
			<view class="info_flex">
				<span class="info_left">
					<img class="seller_head_portrait" src="http://127.0.0.1:7001/public/whj/touxiang1.png" alt="">
					<span class="fans_box">
						<p class="seller_name">用户名</p>
						<span class="fans">粉丝:{{goods.fans}}</span>
						<span>关注:{{goods.follow}}</span>
					</span>
				</span>
				<u-button @click='follow(goods)' class="follow_btn" type="primary">
					{{goods.guanzhu=='1'?'已关注':'+关注'}}
				</u-button>
			</view>
		</view>
		<!-- 全部留言 -->
		<view style="width: 90%;" class="lfy_goods_box seller_info">
			<p class="title">全部留言·{{this.message.length}}</p>
			<view class="leave_message_box" v-for="item in message" :key="item.id">
				<view class="leave_message">
					<span class="message_left">
						<img class="message_head_portrait" :src="item.headPortrait" alt="">
						<p class="message_name">{{item.messName}}</p>
					</span>
					<view>
						<u-icon @click='dian(item)' size="20" name="thumb-up-fill"></u-icon>
						<span
							style='font-size: 13upx; margin-left:44upx;margin-top: -34upx;display: block;'>{{item.dian}}</span>
					</view>

				</view>
				<p class="message_con">{{item.messContent}}</p>
				<span class="message_time">1分钟前</span>
			</view>
		</view>
		<view style="width: 100%;height: 200upx;"></view>
		<!-- fixed -->
		<view class="fixed">
			<span class="operation_left">
				<span v-if="iszan1" @click='zan()' >
					<u-icon    color="#28d2d1" size="22" name="thumb-up-fill"></u-icon>已赞
				</span>
				<span v-if="iszan"  @click='zan()'>
					<u-icon   size="22" name="thumb-up-fill"></u-icon>点赞
				</span>
				<span>
					<u-icon @click="show = true"  size="22" name="chat-fill"></u-icon>评论
					<u-popup :show="show" @close="close" @open="open">
					            <view style="width:100%;height:300upx;">
									<view style="display: flex;width: 80%;margin: 400upx auto; margin-top:150upx;">
										<input placeholder="请输入内容" v-model="value" style="border: 1px solid #999;padding-left: 30upx; width:70%;height: 35px;border-radius: 30px;" type="text" />
										<u-button @click='fabu()' style='width: 20%;margin-left: 20upx;margin-top: -3upx;border-radius: 30px;'  type="primary" text="发布"></u-button>
									</view>
					            </view>
							</u-popup>
				</span>
				<span v-if="isshou1" @click='shou'>
					<u-icon size="22" name="star-fill"></u-icon>收藏
				</span>
				<span v-if="isshou" @click='shou'>
					<u-icon size="22" color="#28d2d1" name="star-fill"></u-icon>已藏
				</span>
			</span>
				
			<u-button class="want_btn" type="primary" text="我想要"></u-button>
		</view>
	<!-- 弹出 -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: {},
				goodsBanner: [],
				message: [],
				ids: '',
				// 点赞
				iszan1:true,
				iszan:false,
				// 收藏
				isshou1:true,
				isshou:false,
				// 弹出
				 show: false,
				 // input框的value
				 value:''
			}
		},
		onLoad(option) {
			this.ids = option.id
			this.$api.searchshop({
				id: this.ids
			}).then(res => {
				this.goods = res.data
				console.log(this.goods)
			})
			this.$api.searchMes({judge:this.ids}).then(res => {
				console.log(res.data)
				this.message=res.data
			})
			
		},

		methods: {
			// 关注
			follow() {
				console.log(this.goods.guanzhu)
				if (this.goods.guanzhu == '0') {
					let a = {
						id: this.goods.id,
						guanzhu: '1',
						// 关注的数量+1
					   follow:Number(this.goods.follow)+1
					}
					this.$api.upshopList(a).then(res => {
					
					
						this.$api.searchshop({
							id: this.ids
						}).then(res => {
							this.goods = res.data
							console.log(this.goods)
						})
						this.$api.getMessage().then(res => {
							this.message = res.data
						})
						
					})
				} else {
					let a = {
						id: this.goods.id,
						guanzhu: '0',
						follow:Number(this.goods.follow)-1
					}
					this.$api.upshopList(a).then(res => {
						this.$api.searchshop({
							id: this.ids
						}).then(res => {
							this.goods = res.data
							console.log(this.goods)
						})
						this.$api.getMessage().then(res => {
							this.message = res.data
						})
					})
				}


			},
			// 点赞
			dian(item) {
				// if()
				console.log(Number(item.dian) + 1)
				console.log(item.state)
				if (item.state == 0) {
					this.$api.upMess({
						id: item.id,
						dian: Number(item.dian) + 1,
						state:1
					}).then((res) => {
						
						console.log(res)
					this.$api.searchMes({judge:this.ids}).then(res => {
						console.log(res.data)
						this.message=res.data
					})
					})
				}else{
					this.$api.upMess({
						id: item.id,
						dian: Number(item.dian) - 1,
						state:0
					}).then((res) => {
						console.log(res)
						this.$api.searchMes({judge:this.ids}).then(res => {
							console.log(res.data)
							this.message=res.data
						})
					})
				}

			},
			// 点赞
			zan(){
				this.iszan=!this.iszan
				this.iszan1=!this.iszan
			},
			// 收藏
			shou(){
				this.isshou1=!this.isshou1
				this.isshou=!this.isshou
			},
			open(){},
			// 发布
		 close() {
		          this.show = false
		        },
				fabu(){
					console.log(this.value)
					let a={
						headPortrait:'http://127.0.0.1:7001/public/whj/touxiang.png',
						messName:'滚滚长江东逝水',
						messContent:this.value,
						dian:'0',
						state:'0',
						judge:this.ids
					}
					this.$api.addMess(a).then(res=>{
						this.$api.searchMes({judge:this.ids}).then(res => {
							console.log(res.data)
							this.message=res.data
							this.show = false
						})
					})
				}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.lfy_goods_box {
		padding: 30upx;
		border-bottom: 15upx solid #f8f8f8;
	}

	// 内容
	.goods_info {
		padding: 15upx;
	}

	.name {
		color: #666;
		font-size: 32upx;
		height: 50upx;
		line-height: 50upx;
	}

	.goods_tags {
		height: 80upx;
		line-height: 80upx;
		display: flex;
		justify-content: space-between;
	}

	.goods_tags .price {
		color: #ff7098;
		font-size: 30upx;
	}

	.symbol {
		font-size: 20upx;
	}

	.collect {
		color: #999;
		font-size: 20upx;
	}

	.goods_introduce {
		color: #999;
		font-size: 25upx;
	}

	// 发布人
	.info_flex {
		display: flex;
		justify-content: space-between;
		height: 60upx;
		padding: 20upx 0;
	}

	.seller_head_portrait {
		height: 100%;
	}

	.seller_name {
		color: #666;
		font-size: 25upx;
	}

	.fans_box {
		color: #999;
		font-size: 18upx;
		margin-left: 20upx;
		float: right;
	}

	.fans_box .fans {
		margin-right: 20upx;
	}

	.seller_info .title {
		border-left: 4upx solid #28d2d1;
		color: #666;
		font-size: 32upx;
		padding-left: 10upx;
	}

	.follow_btn {
		width: 21%;
		color: #333;
		background-color: #28d2d1;
		border: none;
		border-radius: 20upx;
		height: 100%;
	}

	// 全部留言
	.leave_message {
		display: flex;
		justify-content: space-between;
		height: 60upx;
		padding: 20upx 0 0 30upx;
	}

	.message_name {
		color: #666;
		font-size: 25upx;
		float: right;
		line-height: 60upx;
		margin-left: 20upx;
	}

	.message_head_portrait {
		height: 100%;
	}

	.message_con {
		color: #999;
		font-size: 25upx;
		padding-left: 110upx;
	}

	.message_time {
		color: #999;
		font-size: 20upx;
		padding-left: 110upx;
	}

	// fixed
	.fixed {
		width: 100%;
		padding: 30upx;
		position: fixed;
		bottom: 0;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		box-sizing: border-box;
	}


	.operation_left {
		width: 50%;
		display: flex;
		justify-content: space-between;
	}

	.operation_left span {
		color: #999;
		font-size: 20upx;
	}

	.want_btn {
		width: 20%;
		color: #fff;
		background-color: #28d2d1;
		border: none;
		border-radius: 30upx;
	}
</style>
